<template>
  <div class="home-container">
    <el-row  style=" display: flex; justify-content: space-between;">
      <div>欢迎 {{ user.uname }} ！您的 uid 为{{ user.uid }} </div>
      <router-link to="/login" style="right: 100px">
        <el-button type="primary"> 登出 </el-button>
      </router-link>
    </el-row>
    <el-container class="layout-container-demo">
      <el-menu :unique-opened="true">
        <el-aside width="200px">
          <slot name="content">
            <el-scrollbar>
              <el-menu>
                <el-sub-menu :index="item.index" v-for="item in menuList" :key="item.index">
                  <template #title>
                    <el-icon :class="item.icon"></el-icon>{{ item.name }}
                  </template>
                  <el-menu-item-group>
                    <el-menu-item :index="subItem.index" v-for="subItem in item.children" :key="subItem.index">
                      <router-link tag="div" :to="subItem.to">{{ subItem.name }}</router-link>
                    </el-menu-item>
                  </el-menu-item-group>
                </el-sub-menu>
              </el-menu>
            </el-scrollbar>
          </slot>
        </el-aside>
      </el-menu>
      <el-main>
        <el-container>
          <router-view />
        </el-container>
      </el-main>
    </el-container>

  </div>
</template>

<script>
import HomeAside from "@/components/HomeAside";
import ContainerPage from "@/components/containerPage";
import Book from "@/components/Book";

export default {
  data() {
    return {
      user: {
        uid: "",
        uname: "",
      },
      menuList: [
        {
          name: "目录",
          index: "1",
          icon: "icon-menu",
          children: [
            {
              name: "书籍",
              index: "1-1",
              to: "/containerPage",
            },
            {
              name: "文章",
              index: "1-2",
              to: "/articlePage",
            },
            {
              name: "新闻",
              index: "1-3",
              to: "/newsPage",
            },
          ],
        },
      ],
    };
  },
  components: {
    HomeAside,
    ContainerPage,
    Book,
  },
  mounted() {
    const user = JSON.parse(sessionStorage.getItem("userInfo"));
    if (user === null) {
      alert("你还没有登陆");
      this.$router.push("/login");
    } else {
      this.user = user;
    }
  },
};
</script>

<style>
div{
  margin-top: 0;
}
</style>
